<template>
  <div v-if="recommendPassage != null && recommendPassage.length != 0">
    <el-card
      shadow="hover"
      class="travel-card"
      v-for="(passage, index) in recommendPassage"
      :key="index"
    >
      <el-row :gutter="0" class="card-content">
        <!-- 左侧封面图 -->
        <el-col :span="8" class="cover-col">
          <div class="cover-wrapper">
            <img :src="passage.pic" class="cover-image" v-if="passage.pic" />
            <img v-else src="@/assets/path1.jpg" class="cover-image" />
          </div>
        </el-col>
        <!-- 右侧文字内容 -->
        <el-col :span="16" class="info-col">
          <div class="title-row">
            <span class="title">
              <router-link
                style="text-decoration: none"
                :to="{
                  name: 'showArticle',
                  params: {
                    articleId: passage.articleId,
                  },
                }"
                >{{ passage.title }}</router-link
              >
            </span>
            <el-icon v-if="passage.isCollect" class="collect-icon">
              <StarFilled />
            </el-icon>
          </div>

          <div class="author-row">
            <el-avatar :src="passage.avatar" size="small" />
            <span class="author-name">{{ passage.author }}</span>
            <span class="create-time">{{ passage.createTime }}</span>
          </div>

          <div class="tags-row">
            <el-tag v-for="(tag, idx) in passage.tags" :key="idx" size="small" class="tag">
              {{ tag }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <div v-else style="background-color: #fff">
    <el-empty description="暂无推荐"></el-empty>
  </div>
</template>

<script setup lang="ts">
import { type Passage } from '@/utils/dataType/ArticleModel.ts'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getRecommendLatestPassage } from '@/services/api/passage.ts'

const recommendPassage = ref<Array<Passage>>([])
onMounted(async () => {
  recommendPassage.value = []
  try {
    const res = await getRecommendLatestPassage()
    recommendPassage.value = res.data

    // if (res.status === 200 && res.data.code == 1) {
    //   if (res.data.data != null) {
    //     recommendPassage.value = res.data.data
    //   }
    // } else {
    //   ElMessage.error('出错了:' + res.data.msg)
    // }
  } catch (error) {
    ElMessage.error('出错了！' + error)
  } finally {
    console.log('获得的推荐文章有:',recommendPassage)
  }
})
</script>

<style scoped>
.travel-card {
  margin: 20px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}

.card-content {
  display: flex;
}

.cover-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.cover-wrapper {
  width: 100%;
  height: 180px; /* 固定高度 */
  overflow: hidden;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例裁剪填充 */
  display: block;
}

.info-col {
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.collect-icon {
  color: #f7ba2a;
  font-size: 18px;
}

.author-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 13px;
  color: #666;
}

.author-name {
  margin-left: 8px;
  font-weight: 500;
}

.create-time {
  margin-left: auto;
  font-size: 12px;
  color: #999;
}

.tags-row {
  margin-top: 5px;
  text-align: left;
}

.tag {
  margin-right: 6px;
  margin-top: 4px;
}
</style>
